<template>
  <div class="header_container">
    <div class="suvivor_container">
        <div class="logo_container">
          <img :src="teamInfo[gameInfo.survivorTeam].logo" />
        </div>
        <div class="account_container">
          <div class="big_score">
            <p>W{{ gameInfo[`${gameInfo.survivorTeam}Score`].win }}</p>
            <p>D{{ gameInfo[`${gameInfo.survivorTeam}Score`].down }}</p>
          </div>
          <p class="team_name">{{ teamInfo[gameInfo.survivorTeam].teamName }}</p>
        </div>
        <div class="big_account_container">
          <p>{{ gameInfo[`${gameInfo.survivorTeam}Score`].smallScore }}</p>
        </div>
    </div>
    <FrontEndTimeLock />
    <div class="hunter_container">
        <div class="big_account_container">
          <p>{{ gameInfo[`${gameInfo.hunterTeam}Score`].smallScore }}</p>
        </div>
        <div class="account_container">
          <p class="team_name">{{ teamInfo[gameInfo.hunterTeam].teamName }}</p>
          <div class="big_score">
            <p>W{{ gameInfo[`${gameInfo.hunterTeam}Score`].win }}</p>
            <p>D{{ gameInfo[`${gameInfo.hunterTeam}Score`].down }}</p>
          </div>
        </div>
        <div class="logo_container">
          <img :src="teamInfo[gameInfo.hunterTeam].logo" />
        </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import FrontEndTimeLock from './FrontEndTimeLock.vue';
defineProps<{
    'teamInfo': TeamInfo,
    'gameInfo':IncSessionGameInfo
}>();
</script>
<style scoped lang='scss'>
.header_container{
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns:462px auto 462px;
    
    .suvivor_container{
      display:grid;
      grid-template-columns:120px auto 78px;
      width:100%;
      align-items:center;
      background: linear-gradient(135deg, #1a4b8c 0%, #0d2b5e 100%);
      border-bottom: 2px solid #4fc3f7;
      box-shadow: 0 0 15px rgba(79, 195, 247, 0.5);
      position: relative;
      overflow: hidden;
      
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
      }
      
      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
      }
      
      .logo_container{
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        img{
          height:70px;
          width:70px;
          border-radius:50%;
          border: 2px solid #4fc3f7;
          box-shadow: 0 0 10px #4fc3f7;
        }
      }
      .account_container{
        color:#fff;
        padding:0 2em;
        display:flex;
        align-items:center;
        justify-content:space-between;
        text-shadow: 0 0 5px rgba(79, 195, 247, 0.8);
        .big_score{
          display:flex;
          align-items:center;
          justify-content:center;
          gap:1em;
          font-size:1rem;
          p {
            position: relative;
            padding: 0 10px;
            &:after {
              content: "";
              position: absolute;
              bottom: -3px;
              left: 0;
              width: 100%;
              height: 1px;
              background: #4fc3f7;
            }
          }
        }
        .team_name{
          font-size:1.1rem;
          font-weight:bolder;
          letter-spacing: 1px;
        }
      }
      .big_account_container{
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        p{
          font-size:36px;
          font-weight:bolder;
          text-shadow: 0 0 10px #4fc3f7;
          position: relative;
          &:before, &:after {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            border: 2px solid #4fc3f7;
          }
          &:before {
            top: -5px;
            left: -15px;
            border-right: none;
            border-bottom: none;
          }
          &:after {
            bottom: -5px;
            right: -15px;
            border-left: none;
            border-top: none;
          }
        }
      }
    }
    
    // 监管
    .hunter_container{
      display:grid;
      grid-template-columns:78px auto 120px;
      width:100%;
      align-items:center;
      background: linear-gradient(135deg, #8c1a1a 0%, #5e0d0d 100%);
      border-bottom: 2px solid #f44336;
      box-shadow: 0 0 15px rgba(244, 67, 54, 0.5);
      position: relative;
      overflow: hidden;
      
      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #f44336, transparent);
      }
      
      &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, #f44336, transparent);
      }
      
      .logo_container{
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        img{
          height:70px;
          width:70px;
          border-radius:50%;
          border: 2px solid #f44336;
          box-shadow: 0 0 10px #f44336;
        }
      }
      .account_container{
        color:#fff;
        padding:0 2em;
        display:flex;
        align-items:center;
        justify-content:space-between;
        text-shadow: 0 0 5px rgba(244, 67, 54, 0.8);
        .team_name{
          font-size:1.1rem;
          font-weight:bolder;
          letter-spacing: 1px;
        }
        .big_score{
          display:flex;
          align-items:center;
          justify-content:center;
          gap:1em;
          font-size:1rem;
          p {
            position: relative;
            padding: 0 10px;
            &:after {
              content: "";
              position: absolute;
              bottom: -3px;
              left: 0;
              width: 100%;
              height: 1px;
              background: #f44336;
            }
          }
        }
      }
      .big_account_container{
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        p{
          font-size:36px;
          font-weight:bolder;
          text-shadow: 0 0 10px #f44336;
          position: relative;
          &:before, &:after {
            content: "";
            position: absolute;
            width: 15px;
            height: 15px;
            border: 2px solid #f44336;
          }
          &:before {
            top: -5px;
            left: -15px;
            border-right: none;
            border-bottom: none;
          }
          &:after {
            bottom: -5px;
            right: -15px;
            border-left: none;
            border-top: none;
          }
        }
      }
    }
}
</style>